@model DetailsProductDetailViewModel

@{
	ViewBag.Title = Resources.Shared.AppName + " - " + string.Format(Resources.Shared.DetailsViewTitle, Model.IdentityDescription);
}

<div class="view-container">
  <div class="view-header-container">
    <h2 class="view-header">@string.Format(Resources.Shared.DetailsViewTitle, Model.IdentityDescription)</h2>
  </div>

  <!-- Top buttons -->
  <div class="view-button-container top-button-container">
    <input type="button" class="button back-button" title="@Resources.Shared.Back" onclick="window.location='@Url.Action("Index", "ProductDetail")'"/>
  </div>
  <!-- Detail begin -->
  <div class="entity-form-container">
    <fieldset>
	  <legend>@Resources.ProductDetailResources.ProductDetail</legend>
	  <div class="form">
			<div class="field">
			  <div class="label">
				<b>
				  @Html.Label(Resources.ProductDetailResources.Stock):
				</b>
			  </div>
			  <div class="editor">
				@Html.DisplayFor(model => model.Stock)
			  </div>
			</div>
			<div class="field">
			  <div class="label">
			    <b>
				  @Html.LabelFor(model => model.Product):
				</b>
			  </div>
			  <div class="editor">
				@if (Model.Product != null)
				{
					@Model.Product.IdentityDescription
				}
			  </div>
			</div>
		</div>
      </fieldset>
    </div>
	<!-- Detail end -->
	<!-- Tab strip begin -->
    <div id="ProductDetailTab-container">
      <ul>
        <li>
		  <span class="tab_outer">
            <span class="tab_inner">
			  <a href="#orderDetailsTab">@Resources.ProductDetailResources.OrderDetails</a></li>
			</span>
          </span>
		</li>
        <li>
		  <span class="tab_outer">
            <span class="tab_inner">
			  <a href="#optionTab">@Resources.ProductDetailResources.Option</a></li>
			</span>
          </span>
		</li>
      </ul>
	  <!-- OrderDetails Tab begin -->
      <div id="orderDetailsTab">
        <!-- Grid begin -->
        <div class="grid-view-container">
		  <div class="grid-top-buttons">
		  	<input type="button" class="button report-button" title="@(Resources.Shared.Report)" onclick="document.location = '@Url.Action("ReportOrderDetails", "ProductDetail")?masterId=@Model.Id';" />
		  </div>
		  <div class="grid-separator">
		  </div>		
          <div class="grid-view-panel">
			<table id="OrderDetailsGrid"></table>
          </div>
		  <div class="grid-separator">
		  </div>
		  <div class="grid-view-count">
            <span>@(Resources.Shared.GridTotal)<span id="OrderDetailsGrid-total-count" class="count-number"></span></span>    
          </div>
        </div>
        <!-- Grid end -->
        
      </div>
	  <!-- OrderDetails Tab end -->
	  <!-- Option Tab begin -->
      <div id="optionTab">
        <!-- Grid begin -->
        <div class="grid-view-container">
		  <div class="grid-top-buttons">
		  	<input type="button" class="button report-button" title="@(Resources.Shared.Report)" onclick="document.location = '@Url.Action("ReportOption", "ProductDetail")?masterId=@Model.Id';" />
		  </div>
		  <div class="grid-separator">
		  </div>		
          <div class="grid-view-panel">
			<table id="OptionGrid"></table>
          </div>
		  <div class="grid-separator">
		  </div>
		  <div class="grid-view-count">
            <span>@(Resources.Shared.GridTotal)<span id="OptionGrid-total-count" class="count-number"></span></span>    
          </div>
        </div>
        <!-- Grid end -->
        
      </div>
	  <!-- Option Tab end -->
    </div>
    <!-- Tab strip end -->
 
</div>
@section scripts{
<script type="text/javascript">

$("#ProductDetailTab-container" ).tabs({
	show: function (event, ui) {
			if(ui.index == 0)
			{
				$("#OrderDetailsGrid").jqGrid({
					url: '@Url.Action("LoadOrderDetails", "ProductDetail")?masterId=@Model.Id',
					datatype: 'json',
					mtype: 'POST',
					altRows: true,
					altclass: 'grid-alt-row',
					autowidth: true,
					colNames: ['Quantity', 'Price', 'Tax', 'Discount'],
					colModel: [
					{ index: 'Quantity', name: 'Quantity', sortable: false, resizable: false},
					{ index: 'Price', name: 'Price', sortable: false, resizable: false},
					{ index: 'Tax', name: 'Tax', sortable: false, resizable: false},
					{ index: 'Discount', name: 'Discount', sortable: false, resizable: false},
					],
					gridComplete: 	
						function(){ 
							$("#OrderDetailsGrid").jqGrid('setLabel', 'Quantity', '@Resources.OrderDetailResources.Quantity', 'grid-header-data', '');
							$("#OrderDetailsGrid").jqGrid('setLabel', 'Price', '@Resources.OrderDetailResources.Price', 'grid-header-data', '');
							$("#OrderDetailsGrid").jqGrid('setLabel', 'Tax', '@Resources.OrderDetailResources.Tax', 'grid-header-data', '');
							$("#OrderDetailsGrid").jqGrid('setLabel', 'Discount', '@Resources.OrderDetailResources.Discount', 'grid-header-data', '');
							$("#OrderDetailsGrid").jqGrid('setLabel', 'Order', '@Resources.OrderDetailResources.Order', 'grid-header-data', '');
							
							// Fix: jqgrid first row causes problems with fixed cols
							FixGridColumnSize("OrderDetailsGrid");
						},
					loadComplete:
						function(data){ 
							SetGridTotalCount("OrderDetailsGrid", data.records);
						}
				});
			}
			if(ui.index == 1)
			{
				$("#OptionGrid").jqGrid({
					url: '@Url.Action("LoadSelectedOption", "ProductDetail")?masterId=@Model.Id',
					datatype: 'json',
					mtype: 'POST',
					altRows: true,
					altclass: 'grid-alt-row',
					autowidth: true,
					colNames: ['Name', 'Description', 'OptionType'],
					colModel: [
					{ index: 'Name', name: 'Name', sortable: false, resizable: false},
					{ index: 'Description', name: 'Description', sortable: false, resizable: false},
					{ index: 'OptionType', name: 'OptionType', sortable: false, resizable: false},
					],
					gridComplete: 
						function(){ 
							var ids = jQuery("#SelectedOptionGrid").jqGrid('getDataIDs'); 
							for(var i=0;i < ids.length;i++)
							{ 
								var rowId = ids[i]; 
								$(ToPascal(reference.Name) + "Grid").jqGrid('setRowData', ids[i], {  }); 
							}
						
							$("#OptionGrid").jqGrid('setLabel', 'Name', '@Resources.OptionResources.Name', 'grid-header-data', '');
							$("#OptionGrid").jqGrid('setLabel', 'Description', '@Resources.OptionResources.Description', 'grid-header-data', '');
							$("#OptionGrid").jqGrid('setLabel', 'OptionType', '@Resources.OptionResources.OptionType', 'grid-header-data', '');
							$("#OptionGrid .jqgfirstrow").remove();
						},
					loadComplete:
						function(data){ 
							SetGridTotalCount("OptionGrid", data.records);
						}
				});
			}
	}
});
</script>
}
